@import '../../style/themes';

$skeleton: x-skeleton;

.#{$skeleton} {
  position: relative;

  &-item {
    box-sizing: border-box;
    background-color: $skeleton-item-bg;
  }
  &-item-ref {
    user-select: none;
    pointer-events: none;
    opacity: 0;
  }
}

.#{$skeleton}-animated {
  .#{$skeleton}-item {
    background: $skeleton-item-ani-bg;
    background-size: 400% 100%;
    animation: x-skeleton-loading 1.4s ease infinite;
  }
}

@keyframes x-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}